<template>
	<view class="container">
		<view class="middle">
			<view class="xxk u-p-b-30">
			     <zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs">
			     </zzx-tabs>
			</view> 
			<view class="xxknr u-p-t-30" style="">
			    <view v-show="current === 0">
					<!-- <view class="teamName">
						<view v-for="(item,index) in teamNames" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + tdbk + ')' }">
							<text>{{item.name}}</text>
						</view>
					</view> -->
					<view class="foot u-p-30 u-m-b-30" v-for="(item,index) in 6" :key="index">
						<view class="u-m-b-20">
							<text class="need u-m-r-50">需要</text>
							<text class="design">建筑设计师</text>
						</view>
						<view class="u-m-b-20">
							<text class="need u-m-r-50">意向</text>
							<text class="design">设计师</text>
						</view>
						<view >
							<text class="gongsi">武汉桥梁工程有限公司</text>
						</view>
										
									</view>
			    </view>
			    <view v-show="current === 1">
			   
			   </view>
				<view v-show="current === 2">
		
			
				</view>
				<view v-show="current === 3">
				
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
	    components: {
	        zzxTabs
	    },
	    data() {
	        return {
				activeColor: '#FF9900',
				inactiveColor: '#FFE2CF',
				disabled: true,
				count: 5,
				value: 4,
	            items: ['招聘信息','工程信息','招采信息','智汇观点','智汇服务'],
	            current: 0,
				currentTab: 0,
				date: new Date().toISOString().slice(0, 10),
				bjxm: "../../static/homepage/xmkk.png",
				tdbk: "../../static/homepage/tdmckk.png",
				
				
	        };
	    },
	    methods: {
	      onClickItem(e) {
	        if (this.current !== e.currentIndex) {
	            this.current = e.currentIndex;
	        }
	      },
		  qb(){
			  this.currentTab=0;
		  },
		  hp(){
			  this.currentTab=1;
		  },
		  cp(){
			  this.currentTab=2;
		  }
	    }
	}
</script>

<style scoped lang="scss">
	
	
	.container{
		width: 100%;
	
		// background: #F5F5F9;
	}
	
	.foot{
		width: 90%;
		height: 206rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		background-image: url(../../static/img/jiaoyin.png);
		background-repeat: no-repeat;
		background-size: 20% auto;
		background-position: bottom right;
		
.need{
	
font-size: 30rpx;
color: #9DA2B0;
}
.design{
	
font-size: 30rpx;
color: #0D1D36;
}
.gongsi{
	
color: #4B9CFF;
}
	}

	.xxknr{
		margin-top: 20upx;
		color:#0D1D36;
background: #F5F5F9;
		.details{
			margin-top: 41rpx;
			.left{
				color: #888E9A;
				font-size: 30rpx;
				
			}
			.right{
				position: absolute;
				color: #0E1E36;
				font-size: 30rpx;
				left: 216rpx;
				font-weight: 600;
			}
			.tips {
				margin-left: 69rpx;
				text{
					// margin-left: 24rpx;
					width: 129rpx;
					height: 42rpx;
					font-size: 26rpx;
					color: #4C9CFF;
					background: #EDF5FF;
					text-align: center;
					line-height: 42rpx;
				}
			}
			
		}
	}

	
	.teamName{
		display: flex;
		flex-wrap: wrap;
		.tdbk{
			width: 143rpx;
			height: 165rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 35rpx;
			margin-top: 35rpx;
			text{
				color: #888D99;
				font-size: 28.19rpx;
				line-height: 165rpx;
				margin-left: 19rpx;
			}
		}
	}
	.yjxq-t{
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-top: 45rpx;
		image{
			width: 48rpx;height: 48rpx;
		}
		text{
			font-size: 34rpx;
			color: #4C9CFF;
			font-weight: 600;
		}
	}
	.yjxj{
		padding-left: 28rpx;
		margin-top: 40rpx;
		width: 100%;
		height: 59rpx;
		background-color: #F1F7FF;
		line-height: 59rpx;
		.left{
			font-size: 30rpx;
			color: #888E9A;
		}
		.right{
			position: absolute;
			left: 216rpx;
			color: #0E1E36;
			font-size: 30rpx;
		}
	}
	.yjxj-t{
		padding-left: 28rpx;
		margin-top: 31rpx;
		.left{
			font-size: 30rpx;
			color: #888E9A;
		}
		.right{
			position: absolute;
			left: 216rpx;
			color: #0E1E36;
			font-size: 30rpx;
		}
	}
	.gap{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 39rpx;
	}
	.zhgd{
		margin-top: -20rpx;
		width: 100%;
		height: 84rpx;
		background-color: #F5F5F9;
		display: flex;
		justify-content: space-around;
		line-height: 84rpx;
		font-size: 28rpx;
		color: #4C9CFF;
	}
	.qb{
		width: 152rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		background-color: #FF9A00;
		margin-top: 16rpx;
		color: #ffffff;
		border-radius: 27rpx;
	}
	// 智汇观点
	.qylg{
			width: 102rpx;
			height: 118rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 28rpx;
			margin-top: 15rpx;
			text{
				color: #888D99;
				font-size: 26rpx;
				line-height: 118rpx;
				margin-left: 27rpx;
			}
		}
		.xx{
			width: 24rpx; height: 24rpx;			
		}
		.time{
			color: #888E9A;
			font-size: 26rpx;
			margin-left: 225rpx;
		}
		.title{
			color: #0E1E36;
			font-size: 30rpx;
			font-weight: bold;
		}
		.explain{
			color: #888E9A;
			font-size: 28rpx;
		}
		.f-list{
			padding: 0 0 28rpx 0;
			border-width: 0 0 1rpx 0;
			border-style: solid;
			border-color: #DADFED;
		}
</style>
